"use strict";

/**
 * @auther wtfssd
 * Created by wtfssd on 2017/10/27
 */
import * as React from 'react'

const {View, TouchableOpacity, ScrollView, KeyboardAvoidingView, StyleSheet, ImageBackground, Image, Animated, StatusBar} = require('react-native');

const {List, InputItem, DatePicker, Picker} = require('antd-mobile');

import {autoSize, commonStyles} from "../../assets/styles/common";
import {archiveProps, archiveStyles} from "../../assets/styles/archive";
import MyText from "../../component/MyText";
import MyIcon from "../../component/icon";
import WhiteSpace from "../../component/WhiteSpace";
import {SCREEN_HEIGHT} from "../../constant";
import MyImagePicker from "../../component/MyImagePicker";
import {ArchivePage} from "../../interface/router";
import Colors from "../../assets/styles/Colors";
import {sex} from "../../assets/data";
const {connect} = require('react-redux');
let InputItemStyle = require('antd-mobile/lib/input-item/style/index');
const {Actions} = require("react-native-router-flux");

const newStyle = {};
(() => {
    for (const key in InputItemStyle) {
        if (Object.prototype.hasOwnProperty.call(InputItemStyle, key)) {
            newStyle[key] = {...StyleSheet.flatten(InputItemStyle[key])};
            if (key === 'input') {
                newStyle[key].height = autoSize(140);

            }
        }
    }
})();

class CreateArchivesPage extends React.Component<ArchivePage, any> {

    static defaultProps = {
        createdType: 'new',
        userInfo: null
    };

    constructor(props: ArchivePage, context: any) {
        super(props, context);
        this.state = {

            bgImage: null,
            opacity: new Animated.Value(0),


            avatar: null,
            skills: props.userInfo.skill || [],
            hobbies: props.userInfo.hobby || [],
            duty: props.userInfo.duty || '',
            introduce: props.userInfo.introduce || '',
            website: props.userInfo.website || '',
        };
    }

    pickerAvatarImage = () => {
        MyImagePicker.showImagePicker({width: 100, height: 100, cropperCircleOverlay: true}, (response) => {

            this.setState({avatar: response})
        })
    };
    pickerbgImage = () => {
        MyImagePicker.showImagePicker({width: 200, height: 100}, (response) => {

            this.setState({bgImage: response})
        })
    };

    onScroll(e) {
        Animated.timing(
            this.state.opacity,
            {
                toValue: e.nativeEvent.contentOffset.y
            }
        ).start();
    };


    onSummit = () => {
        if (this.props.createdType === 'edit') {
            let payload: userItem = {...this.props.userInfo};
            if (this.state.avatar) {
                payload['file'] = {
                    uri: this.state.avatar.path,
                    type: 'application/octet-stream',
                    name: this.state.avatar.path.split('/')[this.state.avatar.path.split('/').length - 1]
                }
            }
            payload.introduce = this.state.introduce;
            payload.website = this.state.website;
            payload.duty = this.state.duty;

            payload.skill = this.state.skills.map((s: skillItem) => ({id: s.id}));
            payload.hobby = this.state.hobbies.map((h: hobbyItem) => ({id: h.id}));

            this.props.dispatch({
                type: 'auth/upDataUserInfo',
                payload
            })

        }
        if (this.props.createdType === 'new') {
            let payload: userItem = {...this.props.userInfo};
            if (this.state.avatar) {
                payload['file'] = {
                    uri: this.state.avatar.path,
                    type: 'application/octet-stream',
                    name: this.state.avatar.path.split('/')[this.state.avatar.path.split('/').length - 1]
                }
            }
            payload.introduce = this.state.introduce;
            payload.website = this.state.website;
            payload.duty = this.state.duty;

            payload.skill = this.state.skills.map((s: skillItem) => ({id: s.id}));
            payload.hobby = this.state.hobbies.map((h: hobbyItem) => ({id: h.id}));

            this.props.dispatch({
                type: 'auth/upDataUserInfo',
                payload
            })

        }
    };

    renderListHeader = () => {
        const {avatar, bgImage} = this.state;
        if (bgImage) {
            return (
                <ImageBackground style={archiveStyles.headerView} source={{uri: bgImage.path}}>
                    <TouchableOpacity onPress={this.pickerbgImage}>
                        <MyIcon name='icon-addpicture' size={30} color='#E0E0E0' style={{marginRight: 20}}/>
                    </TouchableOpacity>

                    <TouchableOpacity style={archiveStyles.avatarContainer} activeOpacity={1}
                                      onPress={this.pickerAvatarImage}>
                        <View style={archiveStyles.avatar}>
                            {avatar ? <Image source={{uri: avatar.path}} style={archiveStyles.avatarImage}/> :
                                <View style={[commonStyles.flex1, commonStyles.centerVH]}>
                                    <MyIcon name='icon-addpicture' size={30} color='#C3C2C2'/>
                                    <MyText style={{
                                        backgroundColor: 'transparent',
                                        marginTop: 5,
                                        color: '#666666',
                                        fontSize: 14
                                    }}>添加档案图片</MyText>
                                </View>}

                        </View>
                    </TouchableOpacity>
                    <View style={archiveStyles.headerBottom}/>
                </ImageBackground>
            )
        } else {
            return (

                <View style={archiveStyles.headerView}>
                    <TouchableOpacity onPress={this.pickerbgImage}>
                        <MyIcon name='icon-addpicture' size={30} color='#E0E0E0' style={{marginRight: 20}}/>
                    </TouchableOpacity>

                    <TouchableOpacity style={archiveStyles.avatarContainer} activeOpacity={1}
                                      onPress={this.pickerAvatarImage}>
                        <View style={archiveStyles.avatar}>
                            {avatar ? <Image source={{uri: avatar.path}} style={archiveStyles.avatarImage}/> :
                                <View style={[commonStyles.flex1, commonStyles.centerVH]}>
                                    <MyIcon name='icon-addpicture' size={30} color='#C3C2C2'/>
                                    <MyText style={{
                                        backgroundColor: 'transparent',
                                        marginTop: 5,
                                        color: '#666666',
                                        fontSize: 14
                                    }}>添加档案图片</MyText>
                                </View>}

                        </View>
                    </TouchableOpacity>
                    <View style={archiveStyles.headerBottom}/>
                </View>
            )
        }

    };

    render() {

        const inputItemProps = {
                placeholder: '关于我（140个字符)',
                multiline: true,
                clear: true,
                numberOfLines: 0,
                maxLength: 140,
                styles: StyleSheet.create(newStyle),
                style: {height: autoSize(140), backgroundColor: '#fff'},
                onChange: (e) => {}
            }
        ;
        return (
            <View style={[commonStyles.container, archiveStyles.container]}>
                <StatusBar barStyle='light-content'/>
                <Animated.View style={[archiveStyles.navBar, {
                    backgroundColor: this.state.opacity.interpolate({
                        inputRange: [0, 50],
                        outputRange: ['rgba(35,39,40,0)', 'rgba(35,39,40,1)'],
                        extrapolate: 'clamp'
                    })
                }]}>

                    {this.props.createdType === 'edit' ?
                        <TouchableOpacity style={archiveStyles.back} onPress={Actions.pop}>
                            <MyIcon name={'icon-common-fanhui-copy'} color={Colors.White} size={20}/>
                        </TouchableOpacity> : null}
                    <MyText
                        style={archiveStyles.navBarTitle}>{this.props.createdType === 'new' ? '创建档案' : '编辑档案'}</MyText>
                    <TouchableOpacity style={archiveStyles.nextStep}
                                      onPress={this.props.createdType === 'new' ? Actions.areaPick : this.onSummit}>
                        {this.props.createdType === 'new' ? <MyText style={archiveStyles.navBarTitle}>下一步</MyText> :
                            <MyIcon name={'icon-gou'} color={Colors.White}/>}
                    </TouchableOpacity>
                </Animated.View>

                <KeyboardAvoidingView behavior='position' keyboardVerticalOffset={-100}>
                    <ScrollView keyboardDismissMode='on-drag' onScroll={this.onScroll.bind(this)}
                                scrollEventThrottle={20}>
                        <List renderHeader={this.renderListHeader}>
                            <WhiteSpace color='#F4F4F4'/>
                            <List.Item>{this.props.auth.userInfo.nickName}</List.Item>
                            <InputItem placeholder='职务' defaultValue={this.state.duty}
                                       onChange={duty => this.setState({duty})}/>
                            <InputItem placeholder='网站' defaultValue={this.state.website}
                                       onChange={website => this.setState({website})}/>
                            <WhiteSpace color='#F4F4F4'/>
                            <InputItem {...inputItemProps} defaultValue={this.state.introduce}
                                       onChange={introduce => this.setState({introduce})}/>
                            {/*<WhiteSpace color='#F4F4F4'/>*/}
                            {/*<DatePicker mode={'date'} minDate={new Date('1970-1-1')}>*/}
                            {/*<List.Item>出生日期</List.Item>*/}
                            {/*</DatePicker>*/}

                            {/*<List.Item>性别</List.Item>*/}

                            {/*<Picker data={sex} cols={1}>*/}
                            {/*<List.Item arrow="horizontal">性别</List.Item>*/}
                            {/*</Picker>*/}


                            <WhiteSpace color='#F4F4F4'/>
                            <List.Item arrow='horizontal'
                                       extra={`${this.state.skills.length}个技能`}
                                       onClick={Actions.addHobbyOrSkill.bind(this, {
                                           title: 'Skills',
                                           data: this.state.skills,
                                           callBack: (skills) => this.setState({skills})
                                       })}>添加技能</List.Item>
                            <List.Item arrow='horizontal'
                                       extra={`${this.state.hobbies.length}个兴趣`}
                                       onClick={Actions.addHobbyOrSkill.bind(this, {
                                           title: 'Hobbies',
                                           data: this.state.hobbies,
                                           callBack: (hobbies) => this.setState({hobbies})
                                       })}>添加兴趣</List.Item>
                        </List>
                    </ScrollView>
                </KeyboardAvoidingView>
            </View>
        );
    }
}


export default connect(
    ({auth}) => ({auth})
)(CreateArchivesPage);